<template>
  <div class="w">
    <!-- <div class="plus" style="--left: 300px; --top: 200px; --y: 400px; --x: -200px">
      <i class="iconfont icon-tianjia1"></i>
    </div> -->
    <div class="header">
      <div class="header_up"></div>
    </div>
    <div class="header_icon">
      <i class="iconfont icon-shoucang" @click="collect" v-if="!collectActive"></i>
      <i class="iconfont icon-xingxing" v-if="collectActive" @click="delCollect"></i>
    </div>
    <div class="info">
      <div class="info_header">
        <div class="info_header_top">
          <div class="top_left">
            <div class="top_left_title">
              <span>{{ shopInfo.shopName }}</span>
            </div>
            <div class="top_left_sale">
              <div class="score">
                <i class="iconfont icon-xingxing"></i>
                <span>{{ shopInfo.score }}</span>
              </div>
              <div class="mode">
                <span v-if="shopInfo.mode == 1">骑手专送</span>
                <span v-if="shopInfo.mode == 0">商家自配</span>
              </div>
              <div class="sales">
                <span>月销{{ shopInfo.sales }}</span>
              </div>
            </div>
          </div>
          <div class="top_right">
            <el-image style="border-radius: 10px; width: 70px; height: 70px" :src="shopInfo.shopImage" fit="cover"></el-image>
          </div>
        </div>
        <div class="info_header_bottom">
          <div class="bottom_discounts">
            <el-tag size="mini">{{ shopInfo.discounts }}</el-tag>
          </div>
        </div>
      </div>
      <div class="info_nav">
        <el-menu router mode="horizontal" active-text-color="#FEDE44" :default-active="activePath">
          <el-menu-item index="goods" :route="{ path: 'goods', query: { shopId: this.shopId } }" @click="active('goods')">点菜</el-menu-item>
          <el-menu-item index="rate" :route="{ path: 'rate', query: { shopId: this.shopId } }" @click="active('rate')">评价</el-menu-item>
          <el-menu-item index="seller" :route="{ path: 'seller', query: { shopAddress: this.shopInfo.shopAddress } }" @click="active('seller')"
            >商家</el-menu-item
          >
        </el-menu>
      </div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activePath: 'goods',
      shopInfo: [],
      navActive: 1,
      categoryList: [],
      shopId: '',
      info: [],
      collectActive: false,
      collectForm: {
        shopId: '',
        userId: '',
      },
    };
  },

  created() {
    this.shopId = this.$route.query.shopId;
    this.getShopInfo();
    this.getAvtivePath();
    this.info = JSON.parse(window.localStorage.getItem('userInfo'));

    this.getOneCollect();
  },

  methods: {
    async getOneCollect() {
      this.collectForm.userId = this.info.id;
      this.collectForm.shopId = this.shopId;
      const { data: res } = await this.$http.get('collect/getOneCollect', { params: this.collectForm });
      if (res.code == 1) {
        if (res.data == 'success') {
          this.collectActive = true;
        } else {
          this.collectActive = false;
        }
      } else {
        return this.$message.error('收藏状态查询失败');
      }
    },
    async delCollect() {
      const { data: res } = await this.$http.delete(
        `http://localhost:8080/school/collect/deleteCollect?userId=${this.info.id}&shopId=${this.shopInfo.id}`,
      );
      if (res.code == 1) {
        this.collectActive = false;
        return this.$message.success(res.data);
      } else {
        return this.$message.error('取消收藏失败');
      }
    },
    async collect() {
      this.collectForm.userId = this.info.id;
      this.collectForm.shopId = this.shopInfo.id;
      const { data: res } = await this.$http.post('collect/addCollect', this.collectForm);
      if (res.code == 1) {
        this.collectActive = true;
        return this.$message.success(res.data);
      } else {
        return this.$message.error('添加失败');
      }
    },
    getAvtivePath() {
      if (window.sessionStorage.getItem('activePath')) {
        this.activePath = window.sessionStorage.getItem('activePath');
      }
    },
    active(path) {
      window.sessionStorage.setItem('activePath', path);
      this.activePath = path;
    },
    async getShopInfo() {
      var shop = [];
      const { data: res } = await this.$http.get('shop/getById/' + this.shopId);
      if (res.code == 1) {
        this.shopInfo = res.data;
        this.difference = this.shopInfo.start;
        shop = JSON.parse(localStorage.getItem(this.shopInfo.shopName));
        if (shop != null) {
          this.shopInfo = shop;
          localStorage.removeItem(this.shopInfo.shopName);
        }
        return;
      } else {
        return this.$message.error('信息获取失败');
      }
    },
  },
};
</script>



<style lang="scss" scoped>
.w {
  height: 100vh;
  width: 390px;
  position: relative;

  .header_icon {
    position: absolute;
    top: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
    width: 385px;
    .icon-shoucang {
      color: #f9fafa;
      font-size: 25px;
      margin-right: 15px;
    }
    .icon-xingxing {
      color: #fbcc31;
      font-size: 25px;
      margin-right: 15px;
    }
  }
  .header {
    background: url('../../img/IMG_0466.PNG');
    height: 131px;
    background-size: contain;
    .header_up {
      background-color: #1b1b1d;
      height: 131px;
      opacity: 0.3;
      z-index: 1;
    }
  }
  .info {
    background-color: #fefefe;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    height: calc(100vh - 130px);
    position: absolute;
    top: 100px;
    width: 100%;
    .info_header {
      padding: 15px;
      .info_header_top {
        margin-bottom: 5px;
        display: flex;
        justify-content: space-between;
        position: relative;
        .top_left {
          .top_left_title {
            font-size: 25px;
            color: #232324;
            font-weight: bold;
            letter-spacing: 2px;
            margin-bottom: 5px;
          }
          .top_left_sale {
            display: flex;
            align-items: center;
            .score {
              color: #fd7d03;
              margin-right: 10px;
              font-size: 10px;
              .icon-xingxing {
                font-size: 3px;
              }
            }
            .mode {
              border: 1px solid #ebe5d5;
              background-color: #fefffd;
              color: #ed8c3b;
              font-size: 5px;
              padding: 0px 4px;
              border-radius: 5px;
              margin-right: 10px;
            }
            .sales {
              color: #a7a7a7;
              font-size: 10px;
            }
          }
        }
        .top_right {
          :deep(.el-image) {
            position: absolute;
            bottom: 8px;
            right: 0;
          }
        }
      }
      .info_header_bottom {
        .bottom_discounts {
          .el-tag--mini {
            color: #e46a60;
            border: #f2dee1;
            background-color: #f9ffff;
            border: 1px solid #f2dfe0;
            border-radius: 7px;
          }
        }
      }
    }
    .info_nav {
      :deep(.el-menu-item) {
        font-size: 18px;
      }
    }
  }
}
</style>